<template>
	<view class="user-index" :class="['qn-page-' + theme]">
		<view class="user-top">
			<view class="user-info clearfix" v-if="!hasLogin">
				<view class="ui-img float_left"><u-image shape="circle" width="100rpx" height="100rpx" src="@/static/img/user-re.png"></u-image></view>
				<view class="user-name float_left">
					<!-- <view class="un-text">登录/注册</view> -->
					<button class="ulogin-bth un-text" open-type="getUserInfo" @getuserinfo="getuserinfo">登录/注册</button>
				</view>
				<view class="float_right right-icon" @click="checkLogin('/pages/user/selfconfig')"><u-icon name="setting" size="40" color="#ffffff"></u-icon></view>
			</view>
			<view class="user-info clearfix" v-else>
				<view class="ui-img float_left"><u-image shape="circle" width="100rpx" height="100rpx" :src="user_info.avatar || wxUserInfo.avatarUrl"></u-image></view>
				<view class="user-name float_left">
					<view class="un-text">{{ user_info.name || wxUserInfo.nickName }}</view>
					<view class="un-text-desc">普通用户</view>
				</view>
				<view class="float_right right-icon" @click="checkLogin('/pages/user/selfconfig')"><u-icon name="setting" size="40" color="#ffffff"></u-icon></view>
			</view>
			<view class="num-view">
				<!-- <view class="num-li">
					<view class="num-text">0.00</view>
					<view class="num-tit">余额</view>
				</view>
				<view class="num-li">
					<view class="num-text">0</view>
					<view class="num-tit">积分</view>
				</view> -->
				<view class="num-li" @click="checkLogin('/pages/coupon/index')">
					<view class="num-text">{{ user_info.couponTotalNum || 0 }}</view>
					<view class="num-tit">优惠券</view>
				</view>
				<view class="num-li" @click="checkLogin('/pages/user/collectionGoods')">
					<view class="num-text">{{ user_info.collectTotalNum || 0 }}</view>
					<view class="num-tit">收藏</view>
				</view>
			</view>
		</view>
		<view class="model-view">
			<view class="model-tit clearfix">
				<view class="float_left">我的订单</view>
				<view class="float_right" @click="checkLogin('/pages/order/index')">
					<text>查看全部</text>
					<text class="ibonfont ibonjinru"></text>
				</view>
			</view>
			<view class="model-main fn-ul order-ul">
				<view class="fn-li" @click="goOrder(1)">
					<view class="fn-icon"><text class="ibonfont ibondaifukuan"></text></view>
					<view class="fn-label">待付款</view>
				</view>
				<view class="fn-li" @click="goOrder(2)">
					<view class="fn-icon"><text class="ibonfont ibondaifahuo"></text></view>
					<view class="fn-label">待发货</view>
				</view>
				<view class="fn-li" @click="goOrder(3)">
					<view class="fn-icon"><text class="ibonfont ibonwuliu"></text></view>
					<view class="fn-label">待收货</view>
				</view>
				<view class="fn-li" @click="goOrder(4)">
					<view class="fn-icon"><text class="ibonfont ibonquanbudingdan"></text></view>
					<view class="fn-label">已完成</view>
				</view>
			</view>
		</view>
		<view class="model-view">
			<view class="model-tit">我的服务</view>
			<view class="model-main fn-ul">
				<view class="fn-li" @click="checkLogin('/pages/user/collectionGoods')">
					<view class="fn-icon"><image src="../../static/img/user/icon-4.png"></image></view>
					<view class="fn-label">常购清单</view>
				</view>
				<view class="fn-li" @click="checkLogin('/pages/address/index')">
					<view class="fn-icon"><image src="../../static/img/user/icon-1.png"></image></view>
					<view class="fn-label">我的地址</view>
				</view>
				<view class="fn-li" @click="checkLogin('/pages/coupon/index')">
					<view class="fn-icon"><image src="../../static/img/user/icon-5.png"></image></view>
					<view class="fn-label">我的优惠券</view>
				</view>
				<view class="fn-li" @click="checkLogin('/pages/order/index')">
					<view class="fn-icon"><image src="../../static/img/user/icon-2.png"></image></view>
					<view class="fn-label">我的订单</view>
				</view>
			</view>
		</view>
		<view class="model-view list-model-view">
			<view class="model-tit">其他服务</view>
			<view class="model-main list-ul">
				<view class="list-li clearfix" @click="checkLogin('/pages/coupon/GetCoupon')">
					<view class="float_left">
						<view class="fn-icon"><text class="ibonfont ibonlingquan"></text></view>
						<text>领券中心</text>
					</view>
					<view class="float_right"><text class="ibonfont ibonjinru"></text></view>
				</view>
				<!-- #ifdef MP -->
				<view class="list-li">
					<button class="clearfix share-btn" open-type="share">
						<view class="float_left">
							<view class="fn-icon"><text class="ibonfont ibonfenxiang2"></text></view>
							<text>推荐分享</text>
						</view>
						<view class="float_right"><text class="ibonfont ibonjinru"></text></view>
					</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="list-li clearfix" @click="share">
					<view class="float_left">
						<view class="fn-icon"><text class="ibonfont ibonfenxiang2"></text></view>
						<text>推荐分享</text>
					</view>
					<view class="float_right"><text class="ibonfont ibonjinru"></text></view>
				</view>
				<!-- #endif -->
				<view class="list-li clearfix">
					<view class="float_left">
						<view class="fn-icon"><text class="ibonfont ibonkefu1"></text></view>
						<text>客服中心</text>
					</view>
					<view class="float_right"><text class="ibonfont ibonjinru"></text></view>
				</view>
				<view class="list-li clearfix" @click="checkLogin('/pages/user/selfconfig')">
					<view class="float_left">
						<view class="fn-icon"><text class="ibonfont ibonshezhi2"></text></view>
						<text>设置</text>
					</view>
					<view class="float_right"><text class="ibonfont ibonjinru"></text></view>
				</view>
			</view>
		</view>
		<NoLoginTip :show="tip_show" @cancel="tip_show = false"></NoLoginTip>
		<Tabbar v-model="current"></Tabbar>
	</view>
</template>

<script>
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
import NoLoginTip from '@/components/NoLoginTip.vue';
export default {
	components: {
		uniStatusBar,
		NoLoginTip
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		wxUserInfo() {
			return this.$store.state.wxUserInfo;
		}
	},
	data() {
		return {
			tip_show: false,
			current: 3,
			user_info: {}
		};
	},
	onShow() {
		// 根据主题设置顶部颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.theme === 'red' ? '#f2242c' : this.primaryColor
		});
		if (this.$store.state.hasLogin) {
			this.getCustomerInfo();
		}
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.theme === 'red' ? '#f2242c' : this.primaryColor
		});
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) {},
	// 收藏小程序
	onAddToFavorites() {},
	// #endif
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},

	methods: {
		// 用户详情
		getCustomerInfo() {
			this.$u.api.getCustomerInfo().then(res => {
				this.user_info = res.data;
			});
		},

		getuserinfo(e) {
			this.$store.commit('commit_wxUserInfo', e.detail.userInfo);
			uni.login({
				provider: 'weixin',
				success: res => {
					this.getOpenId(res.code);
				}
			});
		},
		getOpenId(code) {
			this.$u.api
				.getOpenId({
					code: code
				})
				.then(res => {
					this.$store.commit('commit_wxOpenId', res.data.openid);
					this.goPage('/pages/login/index');
				});
		},
		goOrder(index) {
			if (!this.$store.state.hasLogin) {
				this.tip_show = true;
				return;
			}
			this.goPage('/pages/order/index?tbIndex=' + index);
		},
		checkLogin(page, switchTab) {
			if (!this.$store.state.hasLogin) {
				this.tip_show = true;
				return;
			}
			this.goPage(page, switchTab);
		},
		// #ifdef APP-PLUS
		share() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: '千鸟云商',
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		}
		// #endif
	},
	onShareAppMessage(options) {}
};
</script>

<style lang="scss">
.user-index {
	overflow-x: hidden;
	width: 750upx;
}
.user-top {
	// background-color: #f2242c;
	color: #ffffff;
	position: relative;
	width: 100%;
	z-index: 1;
	&::after {
		content: '';
		display: block;
		width: 200%;
		height: 750rpx;
		position: absolute;
		left: -20%;
		top: -100rpx;
		z-index: -1;
		transform: rotate(10deg);
		// background-color: #f2242c;
		background: linear-gradient(#f2242c, #f2242c, #f2242c, #f2242c, #ffffff);
	}
	.user-info {
		padding: 30rpx 24rpx;
		.ui-img {
			border-radius: 100%;
			border: 4upx solid #ffffff;
		}
		.right-icon {
			line-height: 110upx;
		}
		.user-name {
			font-size: 30upx;
			padding-left: 20upx;
			.un-text-desc {
				font-size: 24upx;
				padding-top: 20rpx;
			}
			.ulogin-bth {
				text-align: left;
				height: 46upx;
				line-height: 46upx;
				border-radius: 46upx;
				padding: 0;
				color: #ffffff;
				float: left;
				background-color: transparent;
				margin-top: 20upx;
				&::after {
					border: 0 none;
				}
			}
		}
	}
	.num-view {
		display: flex;
		padding-bottom: 10upx;
		.num-li {
			flex: 4;
			text-align: center;
			position: relative;
			.num-text {
				font-size: 32upx;
				font-weight: 600;
				padding-bottom: 10upx;
			}
			.num-tit {
				font-size: 24upx;
				font-weight: 400;
			}
			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 1px;
				height: 40upx;
				background-color: #ffffff;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.num-li:last-child {
			&::after {
				background-color: transparent;
			}
		}
	}
}
.model-view {
	width: 712upx;
	margin: 24upx auto 0;
	border-radius: 12upx;
	padding-bottom: 30upx;
	background: #ffffff;
	position: relative;
	z-index: 1;
	.model-tit {
		padding: 0 30upx;
		line-height: 80upx;
		font-weight: bold;
		border-bottom: 1px solid #f4f4f4;
		.float_right {
			font-size: 24upx;
			color: #999999;
			font-weight: 400;
			.ibonjinru {
				margin-left: 10upx;
				font-size: 24upx;
			}
		}
	}
	.list-ul {
		padding: 0 30upx;
		.list-li {
			line-height: 90upx;
			font-size: 26upx;
			.fn-icon {
				margin-right: 20upx;
				display: inline-block;
				image {
					width: 60upx;
					height: 60upx;
					vertical-align: middle;
					transform: translateY(-2upx);
				}
			}
			.ibonjinru {
				font-size: 28upx;
				color: #999999;
			}
			.share-btn {
				background-color: #ffffff;
				font-size: 24rpx;
				padding-left: 0;
				padding-right: 0;
				text-align: left;
				color: #333333;
			}
		}
	}
	.fn-ul {
		display: flex;
		flex-wrap: wrap;
		.fn-li {
			width: 25%;
			text-align: center;
			font-size: 26upx;
			margin-top: 30upx;
			.fn-icon {
				image {
					width: 66upx;
					height: 66upx;
				}
				.ibonfont {
					color: #000000;
					font-size: 50upx;
					padding-bottom: 10upx;
					display: inline-block;
				}
			}
		}
	}
	.order-ul {
		.fn-li {
			.fn-label {
				color: #333333;
			}
			.fn-icon {
				.ibonfont {
					color: #575757;
					font-size: 46upx;
				}
			}
		}
	}
}
.list-model-view {
	margin-bottom: 30upx;
	padding-bottom: 0;
}
</style>
